<template>
    <div class="roleEditor">
        <el-dialog :title="type == 1 ? '添加角色':'修改角色'" :visible="dialogFormVisible" width="30%" :show-close="false">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="角色名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.name" autocomplete="off"
                              :placeholder="type == 1?'请输入角色名称':'请输入修改后角色名称'"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" :label-width="formLabelWidth" prop="description">
                    <el-input v-model="form.description" autocomplete="off"
                              :placeholder="type == 1?'请输入角色描述':'请输入修改后角色描述'"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-if="type == 2" type="primary" @click="submitModifyRole()">确 定</el-button>
                <el-button v-if="type == 1" type="primary" @click="submitAddRole()">确 定</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {systemApi,commonApi} from "../../api/api";
    import {validator} from "../../utils/validator";

    export default {
        data() {
            return {
                form: {
                    name: "",
                    description: ""
                },
                index: 0,
                formLabelWidth: '100px',
                rules: {
                    name: {required: true, validator: validator.roleName, trigger: 'blur'},
                    description: {required: true, trigger: 'blur'}

                },
                dialogFormVisible: false,
                type: 1 // 1新增 2编辑
            };
        },
        methods: {
            submitModifyRole() {
                this.$refs["form"].validate((valid) => {
                    if (valid) {
                        systemApi.updateRole(this.form).then((res) => {
                                this.$message({message: res.data.msg, type: 'success'})
                                this.$emit('refreshRow', this.index, this.form)
                            }, commonApi.popoverErrorMessage
                        ).catch(commonApi.popoverErrorMessage);

                        this.dialogFormVisible = false;
                    }
                })

            },
            submitAddRole() {
                this.$refs["form"].validate((valid) => {
                    if (valid) {
                        systemApi.addRole(this.form).then(res => {
                                this.$message({message: res.data.msg, type: 'success'})
                                this.$parent.onSubmit();
                            },
                            commonApi.popoverErrorMessage).catch(commonApi.popoverErrorMessage)
                        this.dialogFormVisible = false;
                    }
                })
            },
            setData(key, value) {
                this[key] = value
                return this
            }
        }
    };
</script>